<template>
	<div id="Category">
		<div class="title-bar">
			<i @click="back()" class="tp-icon icon-black-back"></i>
			<router-link to="/Search">
				<div class="search">
					<img src="../assets/images/home/icon_search_bg.png" alt="" />
					<input type="text" placeholder="搜索你想要的..." />
				</div>
			</router-link>
		</div>
		<div class="main">
			<div class="left-category">
				<ul class="pcates">
					<li v-for="(item,index) in cateList" @click="linkto(index)" class="item" :class="[item.category_id == 0?'active':'']" :key="index">{{item.category_name}}</li>
				</ul>
			</div>
			<div class="right-main">
				<div class="list">
					<div class="item" v-for="(item,index) in cateList" :key="index">
						<div class="title" v-bind:style="{'background-image':'url(' + '/los' + item.category_thumb + ')'}">
							<p><span>{{item.category_name}}</span></p>
						</div>
						<grid :cols="3">
							<grid-item v-for="(child,index) in item.children" :key="index">
								<router-link :to="'/Specific/category_id/' + child.category_id">
									<img :src="'/los' + child.category_thumb" :alt="child.name" onerror="" />
									<p>{{child.category_name}}</p>
								</router-link>
							</grid-item>
						</grid>
					</div>

				</div>
			</div>
		</div>
		<bottom></bottom>
	</div>
</template>

<script>
	import bottom from './comp/Footer'
	import $ from 'jquery'
	import { XHeader, Grid, GridItem } from 'vux'

	export default {
		data() {
			return {
				title: '分类',
				heights: 0,
				listHeight: [],
				cateList: [],
				subData: [],
			}
		},
		components: {
			XHeader,
			Grid,
			GridItem,
			bottom
		},
		mounted() {
			this.getTypeInfo();
		},
		methods: {
			//获取分类页面数据
			getTypeInfo: function() {
				this.$http({
					method: 'POST',
					url: '/los/api/category/list.json',
					data: ''
				}).then((result) => {
					this.cateList = result.data;
					var _this = this;
					this.$nextTick(() => {
						//计算右侧总高度和每个item的高度
						$('.list .item').each(function(index) {
							var height = $(this).outerHeight();
							console.log(height);
							_this.listHeight.push(height);
							_this.heights += height;
						});
						//活动鼠标时执行
						$('.list').scroll(function() {
							//滚动到标杆位置,左侧导航加active
							$('.list .item').each(function() {
								var target = parseInt($(this).offset().top - $(window).scrollTop() - 66);
								console.log(target);
								var i = $(this).index();
								if(target <= 0) {
									$('.pcates .item').removeClass('active');
									$('.pcates .item').eq(i).addClass('active');
								}
							});
						});
					})
				}).catch((err) => {
					console.log(err);
				})
			},

			linkto(index) {
				$('.pcates .item').eq(index).addClass('active').siblings().removeClass('active');
				//经过的高度
				var afterH = this.drop(index);
				$('.list').animate({
					scrollTop: afterH
				}, 500);
			},
			//计算需要经过的高度
			drop(index) {
				var height = 0;
				//如果是第一个
				if(index == 0) {
					return 0;
				} else {
					for(var i = 0; i < index; i++) {
						height += this.listHeight[i];
					}
					return height;
				}
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}

	.main {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 1.19rem 0;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.title-bar {
		background: #fff;
		height: 1.17rem;
		padding: 0 0.26rem;
		position: relative;
	}

	.title-bar:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.17rem;
		height: 1px;
		width: 100%;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.title-bar i {
		margin-top: 0.34rem;
	}

	.search {
		width: 8.37rem;
		height: 0.8rem;
		float: right;
		margin-top: 0.18rem;
		position: relative;
	}

	.search img {
		position: absolute;
		width: 0.34rem;
		height: 0.34rem;
		margin-top: 0.2rem;
		margin-left: 0.26rem;
	}

	.search input {
		width: 100%;
		height: 100%;
		background: #f3f3f3;
		padding-left: 0.8rem;
		border-radius: 0.1rem;
	}

	.left-category {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 2.66666rem;
		background-color: #f3f3f3;
		overflow: auto;
		z-index: 9;
		padding-bottom: 2.88rem;
	}

	.left-category ul {
		overflow: hidden;
	}

	.left-category ul li {
		height: 1.44rem;
		line-height: 1.44rem;
		text-align: center;
		font-size: 0.34666rem;
		color: #aaa;
	}

	.left-category ul li.active {
		position: relative;
		font-size: 0.4rem;
		color: #A30000;
		background-color: #fff;
	}

	.left-category ul li.active:before {
		position: absolute;
		content: '';
		width: 0.08rem;
		height: 1.44rem;
		background-color: #a30000;
		display: block;
	}

	.right-main {
		float: left;
		padding-left: 2.66666rem;
		height: 100%;
		width: 100%;
		overflow: auto;
		background-color: #fff;
		z-index: 999;
	}

	.right-main .list {
		position: relative;
		height: 100%;
		overflow: auto;
		padding-bottom: 1rem;
	}

	.right-main .list .item .title {
		margin: 0 auto;
		margin-bottom: 0.26666rem;
		padding: 0.50666rem 0;
		width: 6.61333rem;
		height: 1.86666rem;
		background-position: center center;
		background-size: 100% 100%;
		border-radius: 0.05333rem;
		display: block;
	}

	.right-main .list .item .title p {
		position: relative;
		margin: 0 auto;
		width: 3.04rem;
		height: 0.88rem;
		text-align: center;
		line-height: 0.96rem;
		font-size: 0.34666rem;
		background-color: rgba(255, 255, 255, .4);
		vertical-align: middle;
	}

	.right-main .list .item .title p:before {
		position: absolute;
		left: 0.08rem;
		top: 0.08rem;
		content: '';
		width: 2.80666rem;
		height: 0.66666rem;
		border: dashed 1px #dcabab;
	}

	.right-main .list .item .title span {
		position: relative;
	}

	.right-main .list .item .title span:before,
	.right-main .list .item .title span:after {
		position: absolute;
		top: 50%;
		margin-top: -1px;
		content: '';
		width: 0.37333rem;
		height: 0.02666rem;
		background-color: #aaa;
	}

	.right-main .list .item .title span:before {
		left: -0.54rem;
	}

	.right-main .list .item .title span:after {
		right: -0.54rem;
	}

	.right-main .list .item .weui-grids:before,
	.right-main .list .item .weui-grids:after,
	.right-main .list .item .weui-grid:before,
	.right-main .list .item .weui-grid:after {
		border: none;
	}

	.right-main .list .item img {
		width: 1.62666rem;
		height: 1.62666rem;
	}

	.right-main .list .item .weui-grid {
		text-align: center;
		padding: 0.26666rem 0;
	}
</style>
